<template>
  <div class="padding-lr-xl">
    <el-card>
      <div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">

          <el-form-item label="审批人"
                        v-for="(item, index) in formData.approvers" :key="index" style="margin-bottom: 20px">
            <el-row>
              <el-col :span="120">
                <el-select
                  v-model="formData.approvers[index].approverId"
                  filterable
                  placeholder="请选择审批人"
                  style="width: 250px;"
                >
                  <el-option
                    v-for="(item, key) in userMap"
                    :key="key"
                    :label="item"
                    :value="parseInt(key)"
                  />
                </el-select>
              </el-col>

              <el-col :span="100">
                <el-button style="margin-left: 5px" icon="el-icon-circle-plus-outline" @click="addLine()"></el-button>
                <el-button v-if="index!=0" style="margin-left: 5px" icon="el-icon-remove-outline" @click="removeLine(index)"></el-button>
              </el-col>
            </el-row>

          </el-form-item>

          <el-form-item label="抄送人">
            <el-select
              v-model="formData.ccUsers"
              filterable
              clearable
              multiple
              collapse-tags
              placeholder="请选择"
            >
              <el-option
                v-for="(item, value) in userMap"
                :key="value"
                :label="item"
                :value="parseInt(value)"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

  </div>
</template>

<script>

  import { ajax } from "@/store/yg/common/utils";
  import { closeDialog } from "@/utils";

export default {
  data() {
    return {
      formData: {approvers: []},
      userMap: {},
      rules: {
        approver: [{
          required: true,
          message: '请选择',
          trigger: 'blur'
        }]
      },
    };
  },

  methods: {

    /**
     * 初始化下拉框选项
     * */
    async init() {
      let id = this.$store.state.edit.id;
      const { code, data, data2, message } = await ajax(
        "getApproverInitData",
        {id: id}
      );
      if (code !== 200) {
        if (message) {
          this.$message.error(message);
        } else {
          this.$message.error("服务器异常");
        }
        return;
      }
      let list = data;
      for (let item of list) {
        if (item.type === 1) {
          this.formData.approvers.push(item);
        } else {
          this.formData.ccUsers.push(item.approverId);
        }
      }
      this.userMap = data2;
      if (this.formData.approvers.length == 0) {
        this.addLine();
      }
    },

    cancel() {
      closeDialog();
    },

    /**
     * 数据校验
     * */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.save();
        } else {
          console.log("数据校验失败，不允许提交");
          return false;
        }
      });
    },

    async save() {
      let approverObjs = this.formData.approvers;
      let approverUserIds = [];
      for (let item of approverObjs) {
        approverUserIds.push(item.approverId);
      }
      const { code, data, message } = await ajax("saveApprovers", {
        applyId: this.$store.state.edit.id,
        approvers: approverUserIds,
        ccUsers: this.formData.ccUsers
      });
      if (code !== 200) {
        if (message) {
          this.$message.error(message);
        } else {
          this.$message.error("服务器异常");
        }
        return;
      }
      this.cancel();
    },

    addLine() {
      this.formData.approvers.push({
        approverId: null
      });
    },

    removeLine(index) {
      this.formData.approvers.splice(index, 1);
    },
  },

  mounted() {
    this.init();
  }
};
</script>


<style>

</style>
